<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>驴妈妈流立方</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/daterangepicker.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet"
          id="main-ace-style"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css"/>
    <script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
    <script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap-datetimepicker.min.css"/>


    <style>
        td .messageId {
            display: none;
        }

        td:hover .messageId {
            display: block;
            position: absolute;
            z-index: 3;
            background: rgba(17, 17, 17, 0.9);
            border-radius: 4px;
            color: #fff;
            width: 15%;
            font-size: 12px;
            padding: .5em 1em;
            word-break: break-all;
            margin-bottom: 11px;
            text-align: left;
        }

        s {
            position: absolute;
            top: -10px;
            *top: -12px;
            left: 25px;
            display: block;
            height: 0;
            width: 0;
            font-size: 0;
            line-height: 0;
            border-color: transparent transparent rgba(17, 17, 17, 0.9) transparent;
            border-style: dashed dashed solid dashed;
            border-width: 5px;
        }
    </style>
</head>

<body class="skin-2" style="background-color: #FFF;">
<div class="page-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabbable">
                <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab">
                    <li>
                        <a data-toggle="tab" href="#manage">消息回执列表</a>
                    </li>
                    <li flag="0">
                        <a data-toggle="tab" href="#statistics">推送消息统计</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="manage">
                        <div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
                            <div class="row">
                                <form class="form-inline" id="searchForm" method="post"
                                      action="${rc.contextPath}/message/list">
                                    <div class="col-xs-2">
                                        <div class="form-group">
                                            <label>推送日期
                                                <input type="text" id="timeDate" class="form-control datetimepicker"
                                                       style="width: 120px"
                                                       name="timeDate" value="${conditionMessageVO.timeDate!}"
                                                       placeholder="推送日期">
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-2">
                                        <div class="form-group">
                                            <label>设备平台
                                                <select class="form-control chosen-select" name="platformVO"
                                                        id="platformVO">
                                                    <#list platformTypeList as platformType>
                                                        <option value="${platformType.value}"
                                                        <#if conditionMessageVO.platformVO == platformType.value>
                                                            selected
                                                        </#if>
                                                        >${platformType.showName}</option>
                                                    </#list>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-2">
                                        <div class="form-group">
                                            <label>推送渠道
                                                <select name="pushChannelVO" id="pushChannelVO"
                                                        class="form-control chosen-select">
                                                    <#list pushChannelTypeList as pushChannelType>
                                                        <option value="${pushChannelType.value}"
                                                        <#if conditionMessageVO.pushChannelVO == pushChannelType.value>
                                                            selected
                                                        </#if>
                                                        >${pushChannelType.showName}</option>
                                                    </#list>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-3">
                                        <div class="form-group">
                                            <label>推送类别
                                                <select name="pushCategoryVO" id="pushCategoryVO"
                                                        class="form-control chosen-select">
                                                    <#list pushCategoryTypeList as pushCategoryType>
                                                        <option value="${pushCategoryType.value}"
                                                        <#if conditionMessageVO.pushCategoryVO == pushCategoryType.value>
                                                            selected
                                                        </#if>
                                                        >${pushCategoryType.showName}</option>
                                                    </#list>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-3">
                                        <div class="form-group">
                                            <button type="button" class="btn btn-pink btn-sm" id="search">
                                                <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                                查询
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <table id="dynamic-table"
                                   class="table table-striped table-bordered table-hover dataTable no-footer"
                                   role="grid" aria-describedby="dynamic-table_info">
                                <thead>
                                <tr>
                                    <th style="width:2%;">No.</th>
                                    <th style="width:22%;">消息ID</th>
                                    <th style="width:7%;">设备平台</th>
                                    <th style="width:7%;">推送渠道</th>
                                    <th style="width:8%;">推送类别</th>
                                    <th style="width:10%;">推送时间</th>
                                    <th>推送总量</th>
                                    <!-- <th>发送数量</th>
                                    <th>点击数量</th> -->
                                    <th style="width:10%;">创建时间</th>
                                    <th style="width:10%;">更新时间</th>
                                    <th style="width:14%;">消息标识</th>
                                </tr>
                                </thead>
                                <tbody>
                                <#if messages?? && messages?size&gt;0>
                                    <#list messages as message>
                                        <tr class="">
                                            <td>${message_index + 1}</td>
                                            <td style="overflow:hidden;white-space:normal;text-overflow:ellipsis;">
                                                ${message.messageId!}
                                                <#if message.messageId?? && message.messageId!="">
                                                    <div class="messageId">${message.messageId!}<s></s></div>
                                                </#if>
                                            </td>
                                            <td>${message.platform!}</td>
                                            <td>${message.pushChannel!}</td>
                                            <td>${message.pushCategory}</td>
                                            <td style="text-align: center">${message.beginTime?string('yyyy-MM-dd
                                                HH:mm:ss')}
                                            </td>
                                            <td style="text-align: right">${message.pushTotalCount!}</td>
                                            <td style="text-align: center">${message.createTime?string('yyyy-MM-dd
                                                HH:mm:ss')}
                                            </td>
                                            <td style="text-align: center">${message.updateTime?string('yyyy-MM-dd
                                                HH:mm:ss')}
                                            </td>
                                            <td>${message.tailCode!}</td>
                                        </tr>
                                    </#list>
                                    <#else>
                                        <tr>
                                            <td colspan="12">
                                                <div class="alert alert-danger" style="margin-bottom: 0px;"
                                                     role="alert">没有记录!
                                                </div>
                                            </td>
                                        </tr>
                                </#if>
                                </tbody>
                            </table>
                            <#include "paginator.html">
                        </div>
                    </div>
                    <div class="tab-pane" id="statistics">
                        <div class="dataTables_wrapper form-inline no-footer">
                            <div class="row">
                                <form class="form-inline" id="searchFormStatistical" method="post"
                                      action="${rc.contextPath}/message/statistical">
                                    <div class="col-xs-2">
                                        <div class="form-group">
                                            <label>设备平台
                                                <select class="form-control chosen-select" name="platformStatisticalVO"
                                                        id="platformStatisticalVO">
                                                    <#list platformTypeList as platformType>
                                                        <option value="${platformType.value}"
                                                        <#if conditionMessageStatisticalVO.platformStatisticalVO == platformType.value>
                                                            selected
                                                        </#if>
                                                        >${platformType.showName}</option>
                                                    </#list>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-3">
                                        <div class="form-group">
                                            <label>推送类别
                                                <select name="pushCategoryStatisticalVO" id="pushCategoryStatisticalVO"
                                                        class="form-control chosen-select">
                                                    <#list pushCategoryTypeList as pushCategoryType>
                                                        <option value="${pushCategoryType.value}"
                                                        <#if conditionMessageStatisticalVO.pushCategoryStatisticalVO == pushCategoryType.value>
                                                            selected
                                                        </#if>
                                                        >${pushCategoryType.showName}</option>
                                                    </#list>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-3">
                                        <div class="dataTables_length">
                                            <label>选择时段
                                                <input type="text" id="config-demo" name="chooseTimeVO"
                                                       class="form-control"
                                                       value="${conditionMessageStatisticalVO.chooseTimeVO}"/>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-4">
                                        <div class="dataTables_length">
                                            <button type="button" class="btn btn-pink btn-sm" id="searchStatistical">
                                                <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                                查询
                                            </button>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <button type="button" class="btn btn-pink btn-sm" id="export">
                                                <span class="ace-icon fa fa-download icon-on-right bigger-110"></span>
                                                导出Excel
                                            </button>
                                        </div>
                                    </div>
                                </form>
                                <form action="${rc.contextPath}/message/exportStatistical" id="exportFormStatistical"
                                      method="post" hidden="true">
                                    <input id="platformStatisticalVO1" name="platformStatisticalVO" type="text"
                                           hidden="true">
                                    <input id="pushCategoryStatisticalVO1" name="pushCategoryStatisticalVO" type="text"
                                           hidden="true">
                                    <input id="chooseTimeVO1" name="chooseTimeVO" type="text" hidden="true">
                                    <button type="submit" hidden="true" id="exportExcel"
                                            class="btn btn-primary"></button>
                                </form>
                            </div>
                            <table id="statisticalTable"
                                   class="table table-striped table-bordered table-hover dataTable no-footer"
                                   role="grid" aria-describedby="dynamic-table_info">
                                <thead>
                                <tr>
                                    <th>日期</th>
                                    <#if conditionMessageStatisticalVO.pushCategoryStatisticalVO == "NORMAL" ||conditionMessageStatisticalVO.pushCategoryStatisticalVO == "MEMBER_MODEL"||conditionMessageStatisticalVO.pushCategoryStatisticalVO == "PERSONALISE">
                                        <th>推送标题</th>
                                        <th>推送内容</th>
                                    </#if>
                                    <th>推送总量</th>
                                    <#if conditionMessageStatisticalVO.platformStatisticalVO == "ANDROID" || conditionMessageStatisticalVO.platformStatisticalVO == "IPHONE">
                                        <th>送达数</th>
                                    </#if>
                                    <th>点击数</th>
                                    <#if conditionMessageStatisticalVO.platformStatisticalVO == "ANDROID" || conditionMessageStatisticalVO.platformStatisticalVO == "IPHONE">
                                        <th>送达数/推送总量</th>
                                        <th>点击数/送达数</th>
                                    </#if>
                                </tr>
                                </thead>
                                <tbody>
                                <#if messageStatisticalList?? && messageStatisticalList?size&gt;0>
                                    <#list messageStatisticalList as messageStatistical>
                                        <tr class="">
                                            <#if conditionMessageStatisticalVO.pushCategoryStatisticalVO == "NORMAL"||conditionMessageStatisticalVO.pushCategoryStatisticalVO == "MEMBER_MODEL"||conditionMessageStatisticalVO.pushCategoryStatisticalVO == "PERSONALISE">
                                                <td>${messageStatistical.pushDate?string('yyyy-MM-dd HH:mm:ss')}</td>
                                                <#else>
                                                    <td>${messageStatistical.pushDate?string('yyyy-MM-dd')}</td>
                                            </#if>
                                            <#if conditionMessageStatisticalVO.pushCategoryStatisticalVO == "NORMAL"||conditionMessageStatisticalVO.pushCategoryStatisticalVO == "MEMBER_MODEL"||conditionMessageStatisticalVO.pushCategoryStatisticalVO == "PERSONALISE">
                                                <td style="overflow:hidden;white-space:normal;text-overflow:ellipsis;">
                                                    ${messageStatistical.title!}
                                                    <#if messageStatistical.title?? && messageStatistical.title!="">
                                                        <div class="messageId">${messageStatistical.title!}<s></s></div>
                                                    </#if>
                                                </td>
                                                <td style="overflow:hidden;white-space:normal;text-overflow:ellipsis;">
                                                    ${messageStatistical.content!}
                                                    <#if messageStatistical.content?? && messageStatistical.content!="">
                                                        <div class="messageId">${messageStatistical.content!}<s></s>
                                                        </div>
                                                    </#if>
                                                </td>
                                            </#if>
                                            <td>${messageStatistical.pushTotalCounts!}</td>
                                            <#if conditionMessageStatisticalVO.platformStatisticalVO == "ANDROID" || conditionMessageStatisticalVO.platformStatisticalVO == "IPHONE">
                                                <td>${messageStatistical.pushDeliverCounts!}</td>
                                            </#if>
                                            <td>${messageStatistical.pushClickCounts!}</td>
                                            <#if conditionMessageStatisticalVO.platformStatisticalVO == "ANDROID" || conditionMessageStatisticalVO.platformStatisticalVO == "IPHONE">
                                                <td>${messageStatistical.deliverTotalRate!}</td>
                                                <td>${messageStatistical.clickDeliverRate!}</td>
                                            </#if>
                                        </tr>
                                    </#list>
                                    <#else>
                                        <tr>
                                            <td colspan="12">
                                                <div class="alert alert-danger" style="margin-bottom: 0px;"
                                                     role="alert">没有记录!
                                                </div>
                                            </td>
                                        </tr>
                                </#if>
                                </tbody>
                            </table>
                            <#include "paginatorStatistical.html">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- basic scripts -->
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='${rc.contextPath}/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->
<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
<!-- ace scripts -->
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<!-- user scripts -->
<script src="${rc.contextPath}/assets/js/user/base.js"></script>
<!--<script src="${rc.contextPath}/assets/js/moment.min.js"></script>-->
<script src="${rc.contextPath}/assets/js/locale/zh-cn.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>

<script type="text/javascript">


    jQuery(function ($) {
        var options = {
            format: 'YYYY-MM-DD',
            locale: 'zh-cn'
        };

        $('#timeDate').datetimepicker(options).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });
    })
</script>


<script type="text/javascript">
    jQuery(function ($) {
        $('#config-demo').daterangepicker({
                startDate: new Date(new Date().getTime() - 6 * 1000 * 60 * 60 * 24),
                endDate: new Date(),
                showDropdowns: true,
                showWeekNumbers: false,
                timePicker: false,
                timePicker12Hour: false,
                ranges: {
                    '最近7日': [moment().subtract(6, 'days'), moment()],
                    '最近30日': [moment().subtract(29, 'days'), moment()],
                    '最近90日': [moment().subtract(89, 'days'), moment()]
                },
                opens: 'right',
                //buttonClasses: ['btn btn-default'],
                applyClass: 'btn-small btn-pink',
                cancelClass: 'btn-small',
                format: 'yyyy-MM-dd',
                separator: ' to ',
                locale: {
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '起始时间',
                    toLabel: '结束时间',
                    customRangeLabel: '自定义',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
                }
            },
            function (start, end, label) {//格式化日期显示框
                $('#config-demo').html(start.format('yyyy-MM-dd') + ' - ' + end.format('yyyy-MM-dd'));
            });
    });
    jQuery(function ($) {

        var message = "${message}";
        if (!isEmpty(message)) {
            showMsg(message);
        }
        Date.prototype.format = function (format) {
            var o = {
                "M+": this.getMonth() + 1, //month
                "d+": this.getDate(), //day
                "h+": this.getHours(), //hour
                "m+": this.getMinutes(), //minute
                "s+": this.getSeconds(), //second
                "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
                "S": this.getMilliseconds() //millisecond
            }
            if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
                (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)if (new RegExp("(" + k + ")").test(format))
                format = format.replace(RegExp.$1,
                    RegExp.$1.length == 1 ? o[k] :
                        ("00" + o[k]).substr(("" + o[k]).length));
            return format;
        }
        $(".nav-tabs li").click(function () {
            if ($(this).attr("flag") == 0) {
                $(".tab-pane").eq($(this).index()).find(".form-inline").submit();
                $(this).attr("flag", "1");
            } else {
                var d = new Date();
                var month = d.getMonth() + 1;
                var day = d.getDate();
                var str = d.getFullYear() + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
                $('#timeDate').val(str);
                $("#manage").eq($(this).index()).find("#searchForm").submit();
            }
        });
        var tab = "${tab}";
        var chooseTimeVO = "${conditionMessageStatisticalVO.chooseTimeVO}";
        if (tab == "tabStatistical") {
            $('#myTab').children("li").eq(1).addClass("active");
            $('#statistics').addClass("active in");
            $('#config-demo').val(chooseTimeVO);
            $("#statisticalTable").show();
            $("#statistics").find(".ui-jqgrid").show();
        } else if (tab == "tabManage") {
            $('#myTab').children("li").eq(0).addClass("active");
            $('#manage').addClass("active in");
        }

        $("#search").on("click", function () {
            $(this).attr("disabled", "true");
            $(this).attr("readOnly", "true");
            $("#searchForm").submit();
        });

        $("#searchStatistical").on("click", function () {
            $(this).attr("disabled", "true");
            $(this).attr("readOnly", "true");
            $("#searchFormStatistical").submit();
        });

        $("#export").on("click", function () {
            var platform = $("#platformStatisticalVO").val();
            var pushCategory = $("#pushCategoryStatisticalVO").val();
            var time = $("#config-demo").val();
            var arr = time.split("-");
            var sdate = new Date(arr[0]);
            var edate = new Date(arr[1]);
            var num = (edate - sdate) / (1000 * 3600 * 24);//求出两个时间的时间差，这个是天数
            var days = parseInt(Math.ceil(num));//转化为整天（小于零的话剧不用转了）
            if (days > 30) {
                showMsg("参考数据只能导出30天之内数据")
            }
            $("#platformStatisticalVO1").val(platform);
            $("#pushCategoryStatisticalVO1").val(pushCategory);
            $("#chooseTimeVO1").val(time);
            $("#exportExcel").click();
        });
    });
</script>

</body>
</html>